<template>
  <div></div>
</template>

<script>
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

export default {
  data() {},
  mounted() {
    // 1 创建场景
    const scene = new THREE.Scene();

    // 2 创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000,
    );
    camera.position.z = 5;
    camera.position.x = 5;
    camera.position.y = 5;
    // 3 相机指向原点
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    // 4 创建一个渲染器 canvas
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建一个几何体Geometry和材质Material, 组合成网格Mesh
    // const geometry = new THREE.BoxGeometry(); // 创建一个正方体
    // const geometry = new THREE.CircleGeometry(1, 32); // 创建一个半径为1,分段数为32的圆
    // const geometry = new THREE.SphereGeometry(1, 32, 32); // 创建一个半径为1,分段数为32的球体
    // const geometry = new THREE.ConeGeometry(1, 2, 32); // 创建一个底面半径为1,高为2,分段数为32的圆锥体
    const geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32); // 创建一个底面半径为0.5,高为1,分段数为32的圆柱体
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);

    // 5 添加到场景
    scene.add(cube);

    // 8 添加轨道控制器
    // const controls = new OrbitControls(camera, renderer.domElement); // 创建轨道控制器, 第二参数表示监听事件的DOM
    const controls = new OrbitControls(camera, document.body); // 创建轨道控制器, 第二参数表示监听事件的DOM
    // 9 设置阻尼
    controls.enableDamping = true
    controls.dampingFactor = 0.1; // 设置阻尼系数, 数值越小, 惯性越大, 数值越大, 停下来越快

    // 10 自动旋转
    controls.autoRotate = true; // 自动旋转

    // 7 添加世界坐标辅助器
    const axesHelper = new THREE.AxesHelper(5); // 辅助线长度为5
    scene.add(axesHelper);

    // 6 动作绘制
    function animate() {
      /* 8 添加轨道控制器 根据控制器更新画面 */
      controls.update()
      requestAnimationFrame(animate); // 请求浏览器重新绘制画面
      /* 自动旋转
      cube.rotation.x += 0.01; // x轴旋转速度增加
      cube.rotation.y += 0.01; // y轴旋转速度增加
      */
      renderer.render(scene, camera); // 渲染场景和相机设置到屏幕上
    }
    animate(); // 开始动画循环
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
